@let empty = !(dataProvider.currentPageCount$ | async) && !(dataProvider.isLoading$ | async);

<ix-page-header>
  <ix-search-input1
    [value]="filterString"
    [disabled]="empty"
    (search)="onListFiltered($event)"
  ></ix-search-input1>

  <ix-table-columns-selector
    [columnPreferencesKey]="'cloudSyncList'"
    [columns]="columns"
    (columnsChange)="columnsChange($event)"
  ></ix-table-columns-selector>

  <button
    *ixRequiresRoles="requiredRoles"
    mat-button
    color="primary"
    ixTest="add-task"
    [ixUiSearch]="searchableElements.elements.add"
    (click)="openForm()"
  >
    {{ 'Add' | translate }}
  </button>
</ix-page-header>

@if (empty) {
  <ix-empty [conf]="emptyConfig"></ix-empty>
} @else {
  <ix-table
    class="table"
    [ixUiSearch]="searchableElements.elements.tasks"
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider.emptyType$ | async)"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="!!(dataProvider.isLoading$ | async)"
    >
      <ng-template let-task ix-table-details-row [dataProvider]="dataProvider">
        <ix-table-details-row [hiddenColumns]="hiddenColumns" [row]="task">
          <div class="table-details-row-actions">
            @if (!task.job || task.job.state !== jobState.Running) {
              <button
                *ixRequiresRoles="requiredRoles"
                mat-button
                [ixTest]="[task.id, 'run_now']"
                (click)="runNow(task)"
              >
                <ix-icon name="play_arrow"></ix-icon>
                <span>{{ 'Run Now' | translate }}</span>
              </button>
            }

            @if (task.job && task.job.state === jobState.Running) {
              <button
                *ixRequiresRoles="requiredRoles"
                mat-button
                [ixTest]="[task.id, 'stop']"
                (click)="stopCloudSyncTask(task)"
              >
                <ix-icon name="mdi-stop-circle"></ix-icon>
                <span>{{ 'Stop' | translate }}</span>
              </button>
            }

            <button
              *ixRequiresRoles="requiredRoles"
              mat-button
              [ixTest]="[task.id, 'dry_run']"
              (click)="dryRun(task)"
            >
              <ix-icon name="sync"></ix-icon>
              <span>{{ 'Dry Run' | translate }}</span>
            </button>

            <button
              *ixRequiresRoles="requiredRoles"
              mat-button
              [ixTest]="[task.id, 'restore']"
              (click)="restore(task)"
            >
              <ix-icon name="restore"></ix-icon>
              <span>{{ 'Restore' | translate }}</span>
            </button>

            <button
              mat-button
              [ixTest]="[task.id, 'edit']"
              (click)="openForm(task)"
            >
              <ix-icon name="edit"></ix-icon>
              <span>{{ 'Edit' | translate }}</span>
            </button>

            <button
              *ixRequiresRoles="requiredRoles"
              mat-button
              [ixTest]="[task.id, 'delete']"
              (click)="doDelete(task)"
            >
              <ix-icon name="mdi-delete"></ix-icon>
              <span>{{ 'Delete' | translate }}</span>
            </button>
          </div>
        </ix-table-details-row>
      </ng-template>
    </tbody>
  </ix-table>

  <ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
}
